<template>
  <div class="info">
    <mu-appbar style="width: 100%;margin-bottom: -1rem;top:0" color="primary" text-color="primary">
      <mu-button icon slot="right" to="setting">
        <mu-icon color="white" value="settings"></mu-icon>
      </mu-button>
    </mu-appbar>
    <mu-paper :z-depth="0" class="load-more-wrap">
      <mu-container ref="container" class="load-more-content">
        <mu-list textline="two-line">
          <mu-list-item ripple-color="white" avatar button :ripple="false" to="personalInfo">
            <mu-list-item-action>
              <mu-avatar color="primary">
                <mu-icon size="44" value="account_circle"></mu-icon>
              </mu-avatar>
            </mu-list-item-action>
            <mu-list-item-content>
              <mu-list-item-title style="color: white">{{info.phone}}</mu-list-item-title>
              <mu-list-item-sub-title style="color: white">{{info.userName}}</mu-list-item-sub-title>
            </mu-list-item-content>
            <mu-list-item-action>
              <mu-button icon>
                <mu-icon color="white" value="chevron_right"></mu-icon>
              </mu-button>
            </mu-list-item-action>
          </mu-list-item>
        </mu-list>
      </mu-container>
    </mu-paper>
    <mu-paper class="paper">
      <mu-list>
        <mu-list-item button ripple to="bank">
          <mu-list-item-action>
            <mu-icon color="primary" value="view_day"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>银行卡</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </mu-paper>
    <mu-paper class="paper">
      <mu-list>
        <mu-list-item button ripple to="collections">
          <mu-list-item-action>
            <mu-icon color="primary" value="grade"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>我的收藏</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </mu-paper>

    <mu-paper class="paper">
      <mu-list>
        <mu-list-item button ripple to="messageList">
          <mu-list-item-action>
            <mu-icon color="primary" value="email"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>我的消息</mu-list-item-title>
          <mu-list-item-title class="right-title">
            <mu-badge v-show="messageNum >0" :content="messageNum+ ''" circle color="red">
            </mu-badge>
          </mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider" inset></mu-divider>
        <mu-list-item button ripple to="userNotices">
          <mu-list-item-action>
            <mu-icon color="primary" value="notifications"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>我的公告</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </mu-paper>
    <mu-paper class="paper">
      <mu-list>
        <mu-list-item button ripple to="declareList">
          <mu-list-item-action>
            <mu-icon color="primary" value="turned_in"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>我的申报</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider" inset></mu-divider>
        <mu-list-item button ripple to="meetingList">
          <mu-list-item-action>
            <mu-icon color="primary" value="meeting_room"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>我的会议</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider" inset></mu-divider>
        <mu-list-item button ripple>
          <mu-list-item-action>
            <mu-icon color="primary" value="poll"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>我的表决</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </mu-paper>
  </div>
</template>
<script>
  export default {
    name: 'collections',
    data() {
      return {
        messageNum: 0,
        title: '',
        declareList: [],
        num: 10,
        refreshing: false,
        loading: false,
        search: '',
        warning: '向上滑动查看更多',
        info: {
          userName: '',
          phone: '',
          email: ''
        }
      }
    },
    methods: {
      getData() {
        let _self = this;
        this.postRequest("/user/info").then(res => {
          if (res.code === 200) {
            _self.info = res.data;
          }
        });
      },
      getMessageNum() {
        let _this = this;
        this.postRequest("/userMessage/unReadNum").then(res => {
          if (res.code === 200) {
            _this.messageNum = res.data;
          }
        });
      }
    },
    mounted: function () {
      this.getData();
      this.getMessageNum();
    }
  }
</script>

<style scoped lang="less">

  .info {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: auto;
    height: 92%;
  }

  .load-more-wrap {
    width: 100%;
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    .mu-app-bar {
      width: 100%;
    }
  }

  .load-more-content {
    flex: 1;
    overflow: auto;
    padding: 10px 0 10px 0;
    -webkit-overflow-scrolling: touch;
    background-color: #3f51b5;
    color: #ffffff;
  }

  .paper {
    margin-bottom: 10px;
  }

  .divider {
    background-color: #f5f5f5;
  }

  .right-title {
    text-align: right;
    margin-right: -2.5rem;
  }
</style>
